<template>
<div class="popup">
    <div class="popup-main" :class="{cart1: cartStep == 1}">
        <div class="tip">
            <i>!</i>
            <span>哎呀！这些商品不够卖了！</span>
        </div>
        <ul class="list">
            <li v-for="item in list">
                <span class="title">{{ item.title }}</span>
                <span class="desc">{{ item.desc }}</span>
            </li>
        </ul>
        <div class="panel">
            <a href="javascript:void(0);" @click="back">{{ cartStep == 3 ? '返回首页' : '返回修改' }}</a>
        </div>
    </div>
</div>
</template>

<script>
import router from '@/router/index'

export default {
    name: 'cart-validation-failed',

    data() {
        return {

        }
    },

    props: {
        cmmdtyInfoItems: {
            type: Array,
            default: () => []
        },
        invalidItems: {
            type: Array,
            default: () => []
        },
        cartStep: {
            type: Number,
            default: () => 1
        }
    },

    mounted() {
        
    },

    methods: {
        back() {
            switch(this.cartStep) {
                case 1: location.reload(); break;
                case 2: router.push('/cart1'); break;
                case 3: location.href = '/'; break;
            }
        }
    },

    computed: {
        list() {
            let arr = [];
            for (let i of this.invalidItems) {
                if (this.cartStep == 3) {
                    arr.push({title: i.cmmdtyName, desc: i.errorMessage});
                }
                else {
                    for (let j of this.cmmdtyInfoItems) {
                        if (i.itemNo == j.itemNo) {
                            arr.push({title: j.cmmdtyName, desc: i.errorMessage});
                        }
                    }
                }
            }
            return arr;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';

.popup {
    position: fixed;
    width: 100%;
    //height: 100%;
    top: 0;
    left: 0;
    bottom: 2.1rem;
    background: rgba(0, 0, 0, .6);
    overflow: hidden;
    z-index: 10;

    .popup-main {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #FFF;
        &.cart1 {
            //bottom: 2.05rem;
        }

        .tip {
            margin: _(20) _(40);
            font-size: _(24);
            color: #FFF;
            background: #ec4e19;
            border-radius: _(4);
            line-height: _(33);
            padding: 0 _(15);
            text-align: left;
            i {
                display: inline-block;
                width: _(24);
                height: _(24);
                background: #FFF;
                border-radius: _(12);
                color: #ec4e19;
                line-height: _(24);
                text-align: center;
            }
        }

        .list {
            padding: 0 _(40);
            border-top: solid 1px #FAFAFA;
            line-height: _(80);
            font-size: _(28);
            color: #333;
            .title {
                display: inline-block;
                width: _(430);
                margin-right: _(20);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: middle;
            }
            .desc {
                color: #999;
                vertical-align: middle;
            }
        }

        .panel {
            display: flex;
            a {
                flex: 1;
                display: flex-item;
                height: _(80);
                line-height: _(80);
                background: #F60;
                font-size: _(30);
                color: #FFF;
                text-align: center;
            }
        }
    }
}
</style>